ப்ரீயாக்ட்: நவீன இணைய மேம்பாட்டிற்கான ஒரு இலகுவான ரியாக்ட் மாற்று

தொடர்ந்து மாறிவரும் இணைய மேம்பாட்டுச் சூழலில், செயல்திறன் மிக்க மற்றும் பயனர் நட்புடைய பயன்பாடுகளை உருவாக்குவதற்கு சரியான பிரன்ட்-எண்ட் லைப்ரரி அல்லது பிரேம்வொர்க்கைத் தேர்ந்தெடுப்பது மிகவும் முக்கியமானது. ரியாக்ட் ஒரு ஆதிக்க சக்தியாக மாறியிருந்தாலும், அதன் அளவு மற்றும் சிக்கலான தன்மை சில நேரங்களில், குறிப்பாக செயல்திறன் முதன்மையான திட்டங்களுக்கு ஒரு தடையாக இருக்கலாம். இந்த இடத்தில்தான் ப்ரீயாக்ட் பிரகாசிக்கிறது – இது ரியாக்ட்டுக்கு ஒரு வேகமான, இலகுவான மாற்றாக ஒத்த API உடன் விளங்குகிறது, இது ஒரு நெறிப்படுத்தப்பட்ட மேம்பாட்டு அனுபவத்தை விரும்பும் டெவலப்பர்களுக்கு ஒரு கட்டாயத் தீர்வை வழங்குகிறது.

ப்ரீயாக்ட் என்றால் என்ன?

ப்ரீயாக்ட் என்பது பயனர் இடைமுகங்களை உருவாக்குவதற்கான ஒரு விர்ச்சுவல் DOM வழங்கும் ஜாவாஸ்கிரிப்ட் லைப்ரரி ஆகும். இது ரியாக்ட்டுக்கு ஒரு நேரடி மாற்றாக இருக்க வேண்டும் என்ற நோக்கத்தில், ரியாக்ட்டின் முக்கிய செயல்பாடுகளை மிகக் குறைந்த அளவில் வழங்குகிறது. ரியாக்ட் சுமார் 40KB (minified மற்றும் gzipped) எடையைக் கொண்டிருக்கும் போது, ப்ரீயாக்ட் வெறும் 3KB அளவில் உள்ளது. இது அளவு மற்றும் செயல்திறன் முக்கியமான பயன்பாடுகளுக்கு ஒரு சிறந்த தேர்வாக அமைகிறது.

ப்ரீயாக்ட்டை ரியாக்ட்டின் மெலிதான, வேகமான உறவினராகக் கருதலாம். இது காம்போனென்ட்-அடிப்படையிலான கட்டமைப்பு, விர்ச்சுவல் DOM டிஃப்பிங் மற்றும் JSX ஆதரவு போன்ற அதே முக்கிய நன்மைகளை வழங்குகிறது - ஆனால் எளிமை மற்றும் செயல்திறனில் கவனம் செலுத்துகிறது. இது மொபைல் பயன்பாடுகள், ஒற்றைப் பக்க பயன்பாடுகள் (SPAs), மற்றும் வளக் கட்டுப்பாடுகள் உள்ள உட்பொதிக்கப்பட்ட அமைப்புகளுக்கு குறிப்பாக கவர்ச்சிகரமானதாக அமைகிறது.

ப்ரீயாக்ட்டைப் பயன்படுத்துவதன் முக்கிய நன்மைகள்

• சிறிய அளவு: ப்ரீயாக்ட்டின் மிக முக்கியமான நன்மை அதன் சிறிய அளவு. ஒரு சிறிய லைப்ரரி என்பது வேகமான பதிவிறக்க நேரங்கள், மேம்பட்ட ஆரம்ப ஏற்றுதல் செயல்திறன், மற்றும் ஒரு சிறந்த பயனர் அனுபவம், குறிப்பாக மெதுவான நெட்வொர்க்குகள் மற்றும் சாதனங்களில், ஆகியவற்றை விளைவிக்கும்.
• வேகமான செயல்திறன்: ப்ரீயாக்ட்டின் திறமையான விர்ச்சுவல் DOM டிஃப்பிங் வழிமுறை மற்றும் சிறிய கோட்பேஸ் ஆகியவை வேகமான ரெண்டரிங் மற்றும் மேம்பட்ட ஒட்டுமொத்த செயல்திறனுக்கு பங்களிக்கின்றன. இது மிகவும் பதிலளிக்கக்கூடிய மற்றும் மென்மையான பயனர் இடைமுகத்திற்கு வழிவகுக்கும்.
• ரியாக்ட் இணக்கத்தன்மை: ப்ரீயாக்ட்டின் API பெரும்பாலும் ரியாக்ட்டுடன் இணக்கமானது, இது தற்போதுள்ள ரியாக்ட் திட்டங்களை ப்ரீயாக்ட்டுக்கு மாற்றுவதை அல்லது ரியாக்ட் காம்போனென்ட்களுடன் ப்ரீயாக்ட்டைப் பயன்படுத்துவதை எளிதாக்குகிறது. இந்த இணக்கத்தன்மை ரியாக்ட் அறிந்த டெவலப்பர்கள் ப்ரீயாக்ட்டை விரைவாகக் கற்றுக்கொள்ளவும் பயன்படுத்தவும் முடியும் என்பதையும் குறிக்கிறது. இருப்பினும், இது 100% இல்லை என்பதையும் சில மாற்றங்கள் தேவைப்படலாம் என்பதையும் கவனத்தில் கொள்ள வேண்டும்.
• ES மாட்யூல்ஸ் ஆதரவு: ப்ரீயாக்ட் ES மாட்யூல்ஸுடன் தடையின்றி வேலை செய்ய வடிவமைக்கப்பட்டுள்ளது, இது டெவலப்பர்களுக்கு நவீன ஜாவாஸ்கிரிப்ட் அம்சங்களைப் பயன்படுத்தவும், கோட் அமைப்பை மேம்படுத்தவும் அனுமதிக்கிறது.
• எளிமைப்படுத்தப்பட்ட மேம்பாடு: ப்ரீயாக்ட்டின் சிறிய API பரப்பு மற்றும் எளிமையில் கவனம் செலுத்துவது புதிய டெவலப்பர்களுக்கு கற்பதையும் பயன்படுத்துவதையும் எளிதாக்குகிறது மற்றும் மேம்பாட்டு செயல்முறையை எளிமையாக்குகிறது.
• சிறந்த சூழலமைப்பு: ரியாக்ட்டை விட சிறியதாக இருந்தாலும், ப்ரீயாக்ட்டின் சூழலமைப்பு வளர்ந்து வருகிறது மற்றும் ரூட்டிங், ஸ்டேட் மேனேஜ்மென்ட் மற்றும் UI காம்போனென்ட்கள் உள்ளிட்ட பல பயனுள்ள செருகுநிரல்கள் மற்றும் லைப்ரரிகளை வழங்குகிறது.

ப்ரீயாக்ட்டிற்கான பயன்பாட்டுச் சூழல்கள்

ப்ரீயாக்ட் குறிப்பாக பின்வரும் சூழ்நிலைகளுக்கு நன்கு பொருந்தும்:

• மொபைல் பயன்பாடுகள்: ப்ரீயாக்ட்டின் சிறிய அளவு மற்றும் வேகமான செயல்திறன் மொபைல் பயன்பாடுகளை உருவாக்குவதற்கு ஒரு சிறந்த தேர்வாக அமைகிறது, அங்கு வளக் கட்டுப்பாடுகள் மற்றும் பயனர் அனுபவம் முக்கியமானவை. உதாரணமாக, குறைந்த அலைவரிசை உள்ள பகுதிகளில் உள்ள பயனர்களை இலக்காகக் கொண்ட ஒரு செய்தி பயன்பாட்டைக் கவனியுங்கள். ப்ரீயாக்ட் ரியாக்ட்டை விட கணிசமாக வேகமான ஆரம்ப ஏற்றுதல் நேரத்தை வழங்க முடியும், இது ஒரு சிறந்த பயனர் அனுபவத்தை விளைவிக்கும்.
• ஒற்றைப் பக்க பயன்பாடுகள் (SPAs): ப்ரீயாக்ட்டின் திறமையான ரெண்டரிங் மற்றும் சிறிய தடம் SPAs உருவாக்குவதற்கு ஏற்றதாக அமைகிறது, அங்கு மென்மையான மற்றும் பதிலளிக்கக்கூடிய பயனர் இடைமுகத்தை பராமரிக்க செயல்திறன் முக்கியமானது. ஒரு எளிய CRM பயன்பாடு உதாரணமாக இருக்கலாம், அங்கு விரைவான தொடர்புகள் அவசியமானவை.
• உட்பொதிக்கப்பட்ட அமைப்புகள்: ப்ரீயாக்ட்டின் குறைந்தபட்ச அளவு மற்றும் திறமையான செயல்திறன், வளங்கள் குறைவாக உள்ள உட்பொதிக்கப்பட்ட அமைப்புகளுக்கு ஏற்றதாக அமைகிறது. ஒரு சிறிய திரையுடன் கூடிய ஸ்மார்ட் ஹோம் சாதனத்தை கற்பனை செய்து பாருங்கள். ப்ரீயாக்ட் அதிகப்படியான வளங்களை நுகராமல் பதிலளிக்கக்கூடிய மற்றும் திறமையான UI-ஐ வழங்க முடியும்.
• முற்போக்கு வலை பயன்பாடுகள் (PWAs): PWAs வேகமான ஏற்றுதல் நேரங்கள் மற்றும் ஆஃப்லைன் திறன்களால் பயனடைகின்றன. ப்ரீயாக்ட்டின் சிறிய அளவு வேகமான ஏற்றுதல் மற்றும் மேம்பட்ட செயல்திறனுக்கு பங்களிக்கிறது, இது PWA அனுபவத்தை மேம்படுத்துகிறது. ஒரு ஆஃப்லைன்-முதல் பயண வழிகாட்டி பயன்பாட்டைப் பற்றி சிந்தியுங்கள்.
• வரையறுக்கப்பட்ட வளங்களைக் கொண்ட வலைத்தளங்கள்: செயல்திறன் மற்றும் பக்க எடை முக்கியமான வலைத்தளங்களுக்கு, ப்ரீயாக்ட் ரியாக்ட்டை விட குறிப்பிடத்தக்க நன்மையை வழங்க முடியும். மெதுவான இணைய இணைப்புகளைக் கொண்ட பகுதிகளில் பயனர்களை இலக்காகக் கொண்ட வலைத்தளங்களுக்கு இது குறிப்பாக உண்மை.
• விரைவான முன்மாதிரிகள்: ப்ரீயாக்ட்டில் ரியாக்ட்டை விட குறைவான அம்சங்கள் இருப்பதால், ஒரு முன்மாதிரியை உருவாக்கி செயல்படுத்துவது எளிமையானது.

ப்ரீயாக்ட் vs. ரியாக்ட்: முக்கிய வேறுபாடுகள்

ப்ரீயாக்ட் ரியாக்ட்டுக்கு ஒரு நேரடி மாற்றாக இருக்க வேண்டும் என்று நோக்கம் கொண்டிருந்தாலும், இரண்டு லைப்ரரிகளுக்கும் இடையே சில முக்கிய வேறுபாடுகள் உள்ளன:

• அளவு: முன்பு குறிப்பிட்டபடி, ப்ரீயாக்ட் ரியாக்ட்டை விட கணிசமாக சிறியது (3KB vs. 40KB).
• அம்சங்கள்: ரியாக்ட், Context API, Suspense, மற்றும் concurrent mode போன்ற மேம்பட்ட அம்சங்கள் உட்பட பரந்த அளவிலான அம்சங்களை வழங்குகிறது. ப்ரீயாக்ட் ரியாக்ட்டின் முக்கிய செயல்பாடுகளில் கவனம் செலுத்துகிறது மற்றும் இந்த மேம்பட்ட அம்சங்களில் சிலவற்றைத் தவிர்க்கிறது.
• செயற்கை நிகழ்வுகள் (Synthetic Events): ரியாக்ட் ஒரு செயற்கை நிகழ்வு அமைப்பைப் பயன்படுத்துகிறது, இது வெவ்வேறு உலாவிகளில் நிகழ்வுகளை இயல்பாக்குகிறது. ப்ரீயாக்ட் நேட்டிவ் உலாவி நிகழ்வுகளைப் பயன்படுத்துகிறது, இது செயல்திறனை மேம்படுத்தக்கூடும், ஆனால் குறுக்கு-உலாவி இணக்கத்தன்மை சிக்கல்களை மிகவும் கவனமாகக் கையாள வேண்டியிருக்கலாம்.
• createElement: ரியாக்ட் விர்ச்சுவல் DOM முனைகளை உருவாக்க `React.createElement`-ஐப் பயன்படுத்துகிறது. ப்ரீயாக்ட் நேரடியாக செயல்பாட்டு அழைப்புகளுக்கு மாற்றும் JSX-ஐ நம்பியுள்ளது.
• PropType சரிபார்ப்பு: காம்போனென்ட்களுக்கு இடையே அனுப்பப்படும் தரவை சரிபார்க்க ரியாக்ட்டில் `PropTypes` உள்ளது. ப்ரீயாக்ட்டில் எந்தவொரு உள்ளமைக்கப்பட்ட வழிமுறையும் இல்லை.

ப்ரீயாக்ட்டுடன் தொடங்குவது எப்படி

ப்ரீயாக்ட்டுடன் தொடங்குவது எளிமையானது. நீங்கள் பல்வேறு கருவிகள் மற்றும் அணுகுமுறைகளைப் பயன்படுத்தலாம், அவற்றுள்:

create-preact-app ஐப் பயன்படுத்துதல்

ஒரு புதிய ப்ரீயாக்ட் திட்டத்தைத் தொடங்குவதற்கான எளிதான வழி create-preact-app-ஐப் பயன்படுத்துவதாகும், இது ஒரு மேம்பாட்டு சேவையகம் மற்றும் உருவாக்க செயல்முறையுடன் ஒரு அடிப்படை ப்ரீயாக்ட் திட்டத்தை அமைக்கும் ஒரு கட்டளை வரி கருவியாகும்.

            npx create-preact-app my-preact-app
            

              
                Copy
              
            
          

இந்தக் கட்டளை `my-preact-app` என்ற புதிய கோப்பகத்தை ஒரு அடிப்படை ப்ரீயாக்ட் திட்ட அமைப்புடன் உருவாக்கும். பின்னர் நீங்கள் அந்தக் கோப்பகத்திற்குச் சென்று மேம்பாட்டு சேவையகத்தைத் தொடங்கலாம்:

            cd my-preact-app
npm start
            

              
                Copy
              
            
          

கைமுறை அமைப்பு

நீங்கள் ஒரு ப்ரீயாக்ட் திட்டத்தை கைமுறையாகவும் அமைக்கலாம். இது ஒரு அடிப்படை HTML கோப்பை உருவாக்குதல், ப்ரீயாக்ட் மற்றும் தேவையான சார்புகளை நிறுவுதல், மற்றும் Webpack அல்லது Parcel போன்ற கருவிகளைப் பயன்படுத்தி ஒரு உருவாக்க செயல்முறையை உள்ளமைப்பதை உள்ளடக்கியது.

முதலில், ஒரு `index.html` கோப்பை உருவாக்கவும்:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Preact App</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

பின்னர் ப்ரீயாக்ட் மற்றும் htm ஐ நிறுவவும்:

            npm install preact htm
            

              
                Copy
              
            
          

பின்வரும் உள்ளடக்கத்துடன் ஒரு `index.js` கோப்பை உருவாக்கவும்:

            import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`<div>Hello, Preact!</div>`;
}

render(html`<${App} />`, document.getElementById('app'));
            

              
                Copy
              
            
          

இறுதியாக, உங்கள் குறியீட்டைத் தொகுக்க Webpack அல்லது Parcel-ஐப் பயன்படுத்தி ஒரு உருவாக்க செயல்முறையை உள்ளமைக்கவும்.

உதாரணம்: ப்ரீயாக்ட்டில் ஒரு எளிய கவுண்டர் காம்போனென்ட்

ப்ரீயாக்ட்டில் ஒரு எளிய கவுண்டர் காம்போனென்ட்டின் உதாரணம் இங்கே:

            import { h, useState } from 'preact';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
            

              
                Copy
              
            
          

இந்த காம்போனென்ட் கவுண்டரின் நிலையை நிர்வகிக்க `useState` ஹூக்கைப் பயன்படுத்துகிறது. பொத்தானைக் கிளிக் செய்யும் போது `increment` செயல்பாடு நிலையைப் புதுப்பிக்கிறது. இது ரியாக்ட் குறியீட்டுடன் உள்ள ஒற்றுமையை நிரூபிக்கிறது.

ப்ரீயாக்ட்டின் சூழலமைப்பு மற்றும் சமூகம்

ப்ரீயாக்ட்டின் சூழலமைப்பு ரியாக்ட்டை விட சிறியதாக இருந்தாலும், இது இன்னும் பல்வேறு பயனுள்ள செருகுநிரல்கள் மற்றும் லைப்ரரிகளை வழங்குகிறது. இதோ சில குறிப்பிடத்தக்க உதாரணங்கள்:

• preact-router: ப்ரீயாக்ட் பயன்பாடுகளுக்கான ஒரு எளிய மற்றும் இலகுவான ரூட்டர்.
• preact-compat: ரியாக்ட் காம்போனென்ட்களை ப்ரீயாக்ட் பயன்பாடுகளில் பயன்படுத்த அனுமதிக்கும் ஒரு இணக்கத்தன்மை அடுக்கு.
• preact-render-to-string: ப்ரீயாக்ட் காம்போனென்ட்களை சரங்களாக ரெண்டர் செய்வதற்கான ஒரு லைப்ரரி, இது சர்வர்-சைட் ரெண்டரிங்கிற்குப் பயனுள்ளதாக இருக்கும்.
• preact-helmet: தலைப்பு மற்றும் மெட்டா குறிச்சொற்கள் போன்ற ஆவண தலைப்பு மெட்டாடேட்டாவை நிர்வகிப்பதற்கான ஒரு லைப்ரரி.

ப்ரீயாக்ட் சமூகம் செயலில் மற்றும் ஆதரவாக உள்ளது. ப்ரீயாக்ட் GitHub ரெபாசிட்டரி, ப்ரீயாக்ட் ஸ்லாக் சேனல், மற்றும் பல்வேறு ஆன்லைன் மன்றங்கள் மற்றும் சமூகங்களில் நீங்கள் உதவி மற்றும் வளங்களைக் காணலாம்.

ப்ரீயாக்ட்டைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

ப்ரீயாக்ட்டிலிருந்து அதிகபட்சத்தைப் பெற, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• அளவிற்காக மேம்படுத்துங்கள்: சார்புகளைக் குறைத்து மற்றும் உங்கள் குறியீட்டை அளவிற்காக மேம்படுத்துவதன் மூலம் ப்ரீயாக்ட்டின் சிறிய அளவைப் பயன்படுத்திக் கொள்ளுங்கள். பயன்படுத்தப்படாத குறியீட்டை அகற்ற Webpack's tree shaking போன்ற கருவிகளைப் பயன்படுத்தவும்.
• ES மாட்யூல்ஸைப் பயன்படுத்தவும்: குறியீட்டு அமைப்பை மேம்படுத்தவும் மற்றும் நவீன ஜாவாஸ்கிரிப்ட் அம்சங்களைப் பயன்படுத்தவும் ES மாட்யூல்ஸைப் பயன்படுத்தவும்.
• செயல்திறனை விவரக்குறிப்பு செய்யுங்கள்: உங்கள் பயன்பாட்டின் செயல்திறனை விவரக்குறிப்பு செய்ய உலாவி டெவலப்பர் கருவிகளைப் பயன்படுத்தவும் மற்றும் மேம்படுத்துவதற்கான பகுதிகளை அடையாளம் காணவும்.
• `preact-compat`-ஐ குறைவாகக் கருதுங்கள்: `preact-compat` ரியாக்ட் காம்போனென்ட்களைப் பயன்படுத்த அனுமதிக்கும் போது, செயல்திறன் ஆதாயங்களுக்காக அவற்றை ப்ரீயாக்ட்டில் நேட்டிவ்வாக மீண்டும் எழுத முயற்சிக்கவும். முற்றிலும் தேவைப்படும்போது மட்டுமே அதைப் பயன்படுத்தவும்.
• சோம்பல் ஏற்றுதல் (Lazy Loading): ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்தவும் மற்றும் ஒட்டுமொத்த பக்க எடையைக் குறைக்கவும் காம்போனென்ட்கள் மற்றும் வளங்களுக்கு சோம்பல் ஏற்றுதலைச் செயல்படுத்தவும்.
• சர்வர்-சைட் ரெண்டரிங் (SSR): SEO மற்றும் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்த சர்வர்-சைட் ரெண்டரிங்கை ஆராயுங்கள். `preact-render-to-string` போன்ற லைப்ரரிகள் இதற்கு உதவக்கூடும்.

முடிவுரை

ப்ரீயாக்ட் வேகமான, இலகுவான மற்றும் திறமையான ஒரு பிரன்ட்-எண்ட் லைப்ரரியைத் தேடும் டெவலப்பர்களுக்கு ரியாக்ட்டுக்கு ஒரு கட்டாய மாற்றை வழங்குகிறது. அதன் சிறிய அளவு, ரியாக்ட் இணக்கத்தன்மை மற்றும் எளிமைப்படுத்தப்பட்ட மேம்பாட்டு செயல்முறை ஆகியவை மொபைல் பயன்பாடுகள், SPAs, உட்பொதிக்கப்பட்ட அமைப்புகள் மற்றும் செயல்திறன் முக்கியமான வலைத்தளங்களுக்கு ஒரு சிறந்த தேர்வாக அமைகிறது.

ரியாக்ட் ஒரு சக்திவாய்ந்த மற்றும் அம்சம் நிறைந்த லைப்ரரியாக இருந்தாலும், ப்ரீயாக்ட் செயல்திறன் மற்றும் எளிமைக்கு முன்னுரிமை அளிக்கும் டெவலப்பர்களுக்கு ஒரு மதிப்புமிக்க விருப்பத்தை வழங்குகிறது. ஒவ்வொரு லைப்ரரியின் பலம் மற்றும் பலவீனங்களைப் புரிந்துகொள்வதன் மூலம், டெவலப்பர்கள் தங்கள் குறிப்பிட்ட திட்டத் தேவைகளுக்கு எந்தக் கருவி மிகவும் பொருத்தமானது என்பது பற்றி தகவலறிந்த முடிவுகளை எடுக்க முடியும்.

நீங்கள் ஒரு சிக்கலான இணையப் பயன்பாட்டை உருவாக்கினாலும் அல்லது ஒரு எளிய மொபைல் செயலியை உருவாக்கினாலும், ப்ரீயாக்ட் ரியாக்ட்டுக்கு ஒரு சக்திவாய்ந்த மற்றும் இலகுவான மாற்றாகக் கருத்தில் கொள்ளத்தக்கது.

மேலும் ஆதாரங்கள்

• ப்ரீயாக்ட் அதிகாரப்பூர்வ வலைத்தளம்
• ப்ரீயாக்ட் GitHub ரெபாசிட்டரி
• preact-compat GitHub ரெபாசிட்டரி
• create-preact-app GitHub ரெபாசிட்டரி